<script setup lang="ts" name="ErrorDrawer">
import { mapState } from 'pinia'
import { useModelerStore } from '@/store/bpmnProcess/modelerStore'
import GlobalReference from '../../GlobalReference/index.vue'
import { getGlobalReferenceOptions } from '../../../utils/globalReference'
import { getCurrentError } from '../../../utils/bpmnPropertyUtils/eventDefinition'

const errorFormRef = ref(null)

const emit = defineEmits(['save'])

const visible = ref(false)

const form: any = ref({
  id: '',
  name: '',
  errorMessage: '',
  errorCode: '',
  expression: ''
})

const mapStates = computed(() => {
  return mapState(useModelerStore, ['getActive'])
})

const globalErrorOptions = ref([])

const GlobalReferenceChange = () => {
  globalErrorOptions.value = getGlobalReferenceOptions(mapStates.value.getActive(), 'bpmn:Error')
  if (form.value.id !== '') {
    const res = getCurrentError(mapStates.value.getActive(), form.value.id)
    form.value.errorCode = res.errorCode
    form.value.errorMessage = res.errorMessage
  }
}

const showDrawer = (v) => {
  visible.value = true
  if (v) {
    form.value = v
  }
  globalErrorOptions.value = getGlobalReferenceOptions(mapStates.value.getActive(), 'bpmn:Error')
}
defineExpose({ showDrawer })

// 关闭抽屉
const cancel = () => {
  errorFormRef.value.resetFields()
  form.value = {
    id: '',
    name: '',
    errorMessage: '',
    errorCode: '',
    expression: ''
  }
  visible.value = false
}

// 保存监听器数据
const save = async () => {
  await errorFormRef.value.validate((validate) => {
    if (validate) {
      const result = {
        id: form.value.id,
        name: form.value.name,
        errorMessage: form.value.errorMessage,
        errorCode: form.value.errorCode,
        expression: form.value.expression
      }
      emit('save', result)
      cancel()
    }
  })
}

const errorIdChange = (v) => {
  const res = getCurrentError(mapStates.value.getActive(), v)
  console.log(res, '当前错误状态数据')
  form.value.name = res.name
  form.value.errorCode = res.errorCode
  form.value.errorMessage = res.errorMessage
}
</script>

<template>
  <el-drawer class="error-drawer" v-model="visible" direction="rtl" destroy-on-close size="580px" :before-close="cancel">
    <template #header>
      <h2>错误参考项</h2>
    </template>
    <template #default>
      <el-form :model="form" label-width="auto" label-position="right" ref="errorFormRef" @submit.prevent>
        <el-form-item label="错误名称" prop="id" :rules="{ required: true, trigger: ['blur', 'change'], message: '错误名称不能为空' }">
          <el-select v-model="form.id" @change="errorIdChange">
            <el-option v-for="item in globalErrorOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <template v-if="form.id !== ''">
          <el-form-item label="错误码" prop="errorCode" :rules="{ required: true, trigger: ['blur', 'change'], message: '错误码不能为空' }">
            <el-input v-model="form.errorCode" readonly disabled />
          </el-form-item>
          <el-form-item label="错误信息" prop="errorMessage" :rules="{ required: true, trigger: ['blur', 'change'], message: '错误信息不能为空' }">
            <el-input v-model="form.errorMessage" readonly disabled />
          </el-form-item>
        </template>
        <el-form-item label="抛出表达式">
          <el-input v-model="form.expression" />
        </el-form-item>
        <GlobalReference class="field-content" type="error" @change="GlobalReferenceChange">
          <el-divider>
            <div class="divider-panel">
              <svg-icon icon="ri:error-warning-line"></svg-icon>
              <span>全局错误参考列表</span>
            </div>
          </el-divider>
        </GlobalReference>
      </el-form>
    </template>
    <template #footer>
      <div class="drawer-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<style scoped lang="scss">
.field-content {
  padding-right: 6px;

  .el-button.add {
    width: 100%;
    margin: 12px 0 0;
  }
}

.divider-panel {
  display: flex;
  align-items: center;

  span {
    margin-left: 6px;
  }
}
</style>
<style lang="scss">
.error-drawer {

  .el-drawer__header {
    margin: 0;
    padding: 15px var(--el-space);
    border-bottom: 1px solid var(--el-border-color-extra-light);

    h2 {
      font-weight: bold;
      font-size: 14px;
    }
  }

  .el-drawer__body {
    position: relative;
    padding: calc(var(--el-space) - 8px) calc(var(--el-space) - 8px) calc(var(--el-space) - 8px) calc(var(--el-space) - 2px);
  }

  .el-drawer__footer {
    padding: 12px;
    border-top: 1px solid var(--el-border-color-extra-light);

    .drawer-footer {
      display: flex;

      .el-button {
        flex: 1;
        margin: 6px;
      }
    }
  }
}
</style>
